<template>
  <div v-if="!authUIFlags.isFetching" id="app" class="app-wrapper app-root">
    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
    <transition name="fade" mode="out-in">
      <router-view />
    </transition>
    <add-account-modal
      :show="showAddAccountModal"
      :has-accounts="hasAccounts"
    />
    <woot-snackbar-box />
    <network-notification />
  </div>
  <loading-state v-else />
</template>

<script>
import { mapGetters } from 'vuex'
import AddAccountModal from './components/layout/sidebarComponents/AddAccountModal'
import LoadingState from './components/widgets/LoadingState.vue'
import NetworkNotification from './components/NetworkNotification'
import UpdateBanner from './components/app/UpdateBanner.vue'
import WootSnackbarBox from './components/SnackbarContainer'
import {
  registerSubscription,
  verifyServiceWorkerExistence,
} from './helper/pushHelper'

export default {
  name: 'App',

  components: {
    AddAccountModal,
    LoadingState,
    NetworkNotification,
    UpdateBanner,
    WootSnackbarBox,
  },

  data () {
    return {
      showAddAccountModal: false,
      latestChatwootVersion: null,
    }
  },

  computed: {
    ...mapGetters({
      getAccount: 'accounts/getAccount',
      currentUser: 'getCurrentUser',
      globalConfig: 'globalConfig/get',
      authUIFlags: 'getAuthUIFlags',
      currentAccountId: 'getCurrentAccountId',
    }),
    hasAccounts () {
      const { accounts = [] } = this.currentUser || {}
      return accounts.length > 0
    },
  },

  watch: {
    currentUser () {
      if (!this.hasAccounts) {
        this.showAddAccountModal = true
      }
      verifyServiceWorkerExistence(registration =>
        registration.pushManager.getSubscription().then(subscription => {
          if (subscription) {
            registerSubscription()
          }
        })
      )
    },
    currentAccountId () {
      if (this.currentAccountId) {
        this.initializeAccount()
      }
    },
  },
  mounted () {
    this.setLocale(window.chatwootConfig.selectedLocale)
  },
  methods: {
    setLocale (locale) {
      this.$root.$i18n.locale = locale
    },
    async initializeAccount () {
      await this.$store.dispatch('accounts/get')
      this.$store.dispatch('setActiveAccount', {
        accountId: this.currentAccountId,
      })
      const {
        locale,
        latest_chatwoot_version: latestChatwootVersion,
      } = this.getAccount(this.currentAccountId)
      // const { pubsub_token: pubsubToken } = this.currentUser || {}
      this.setLocale(locale)
      this.latestChatwootVersion = latestChatwootVersion
    },
  },
}
</script>

<style lang="scss">
@import './assets/scss/app';
*,
*::before,
*::after {
  box-sizing: border-box;
}
.update-banner {
  height: var(--space-larger);
  align-items: center;
  font-size: var(--font-size-small) !important;
}
@font-face {
  font-family: "iconfont-vet";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAUAAAsAAAAACyAAAASxAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDZgqHQIYVATYCJAMsCxgABCAFhR0HgT0bkglRVG8aZD8K48anlKkVETWZmxLicOmVmr/4///x8P/79dvn3qcz8xFPKolFNvdIKJAgNOiEIo2SxNPXjOj8r077iQsE6gaMU1/sAgZkh+UqanrH9iEnOdgQNkDciDaaMP9X/+459urvAPmLo80GMsUfde9WdfvLpojgURRggVSlwN5AEshmYpu9MJMq5gH/bb43gY6Z8mk2dPbrIEhBLhSIGxZJD0GZWEWDMTQRVcWahXjCX5Mepft4HHx+jFkRQSRlJve151KHCZoHQ/qy0ldgLCuU8Ri79chYDhTEqUrfEVxUvByncyG/5o0qhZAGO4OTIIhlnc79P14iKpJ6kD7M7TBoggkGJwWRjDvfwSAH1AkGBagLDCpQNxjUoB4waEC9YFCC+sCgBfXDMWc2um6NacA4okPcBhl+IAhPKlQUTp+YEpZAwtijhYXF5gsJl14NvnwpPH+ue/GCX/uqiffs26Uabq95KRTqK8XaF16lZovzvSERa7YBKPF4yBPvWZs46NMIkjmORm0e2ga8blRNGNFEupQ43bY1CbleNXFQsJPP862N5z18BUoZWxid42lA3mJ2/cCCV6jwEooWE3oJpJqHlLgp7FEODmYwkWW/1FiTMGLatuawjTCeb6caaqJR9KpH5hPGdbdT8tr44duV2a4/z8GHbuRJR15WklOvcsXDN7NNB19U1MhRx4/DxoK50MbtevRol83kHj7i/KiHD7H1jnmFv08en536nsiv8C2eLuL5ounFRTIvxJbFcpEgWI9PMC3wUJne4+DdwfeC6xysOyAzGrr71oW1+Ab2h8GoWRsD65q7/Qw+SDN4vQZQ07GbPoNBzumA9q9f28PbVxnvNRl+PbYV+3YpoHwUvHxab/G69LWHdSD7W/slf08bpgu/xsBvXU6zoSH6XFpa9Hl0NjXpXJY76zD8z9zz2W648L3Ucg+dlCqQFP9NyavZEsiv2YMpnxu53ZtmVUpaf0wbMCeis9+D+O5fXPpZkLiln/oK6L/Nz3IGIF/WfoU0mo4BkH6nnbvZXqSbkDdpa4T5Zbo223ptNSBv1TaJ1G3a5s/s11h6YEPiZGT9tya0AB9+5dUF2f23hflKGgm28xPqZHYrrm7pGKNTTAOBruUj2x12VB59kOmTvB4/fCq7IqFnagJJbQ5kPYuFhXQllLrWQKVnO3QsM7h+12RLgBNFi6U8AsIMlyAZ5w1kM3wSFtL/UJoW8VCZEXnQcSjatti1MHZ02ijWM2xChrnIYiROUSewkPAjBW7MBrA0Y9fTfAvPImDqsoxBJYXFZWVd2InpmMu43FIpYyISKXGgTrE/bLcTJFNixUZWaGZMri0qEs+3VGgkDgixHoXpMZgJYjAXYmFEOImufyak8LcVcMOYAZhkhp0eZbTLCynAKBfL1CElChUzhV3kZLe61vO4uElKMYwIEVGEA9IpGLMrJERy9WxWmBFTyNyjUFaryOtN5FLhOsIdD6z779KGfMdupMhRRBlV1NFEG53oRk91H+up0RwgWuwM0xgTmTHYcQG1SGZWoKeUzEbnrTpcPHULiXOCGZE33UPblw8zEMaI4z5OtItQVlAQR3h6xQAAAAA=') format('woff2'),
  url(data:font/woff;base64,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) format('woff'),
  url(data:font/ttf;base64,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) format('truetype');
}

</style>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
